<template>
  <div class="account">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="景区账号" name="first">
        <el-form :inline="true" class="demo-form-inline clear" size="small">
          <el-form-item label="景区名称">
            <el-input v-model="scenicFormInline.name" ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select clearable v-model="scenicFormInline.state" filterable placeholder="选择状态">
              <!--<el-option label="所有状态" value="null"></el-option>-->
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" @click="searchScenicList">搜索</el-button>
          <el-button type="primary" size="small" @click="openScenicAccountDialog()">添加景区账号</el-button>
        </el-form>
        <el-table
          :data="scenicTableData"
          border
          size="small"
          style="width: 100%" v-if="isUpdateTable"
          v-loading.body="loading1" element-loading-text="Loading">
          <el-table-column
            prop="id"
            label="账号ID"
            min-width="100"
            v-if="false">
          </el-table-column>
          <el-table-column
            prop="orgId"
            label="景区ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="账号名称"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="scenicName"
            label="景区名称"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="联系人"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="添加时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createUserName"
            label="添加人"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            width="80">
            <template slot-scope="scope">
               <p v-if="scope.row.state == 1">正常</p>
               <p v-if="scope.row.state == 0">禁用</p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="80">
            <template slot-scope="scope">
              <div class="dropdown">
                <a href="javascript:void(0);" class="dropdown-btn"></a>
                <div class="dropdown-content" >
                  <a href="javascript:void(0);" @click="openScenicAccountDialog(scope.row.id)">修改</a>
                  <a href="javascript:void(0);" @click="disableBackAccount(1,scope.row.id)" v-if="scope.row.state==0">启用</a>
                  <a href="javascript:void(0);" @click="openDisableDialog(0,scope.row.id)" v-if="scope.row.state==1">禁用</a>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize1">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="代理商账号" name="second">
        <el-form :inline="true" class="demo-form-inline clear" size="small">
          <el-form-item label="代理商名称">
            <el-input v-model="distributorFormInline.distributorName" ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select clearable v-model="distributorFormInline.state" filterable placeholder="选择状态">
              <!--<el-option label="所有状态" value="null"></el-option>-->
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" @click="searchDstList">搜索</el-button>
          <el-button type="primary" size="small" @click="openDistributorAccountDialog()">添加代理商账号</el-button>
        </el-form>
        <el-table
          :data="distributorTableData"
          border
          size="small"
          style="width: 100%" v-if="isUpdateTable"
          v-loading.body="loading2" element-loading-text="Loading">
          <el-table-column
            prop="id"
            label="账号ID"
            min-width="100" v-if="false">
          </el-table-column>
          <el-table-column
            prop="orgId"
            label="代理商ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="账号名称"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="distributorName"
            label="代理商名称"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="balance"
            label="余额（元）"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="联系人"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="添加时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createUserName"
            label="添加人"
            min-width="80">
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            width="80">
            <template slot-scope="scope">
              <p v-if="scope.row.state == 1">正常</p>
              <p v-if="scope.row.state == 0">禁用</p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="80">
            <template slot-scope="scope">
              <div class="dropdown">
                <a href="javascript:void(0);" class="dropdown-btn"></a>
                <div class="dropdown-content" >
                  <a href="javascript:void(0);" @click="openDistributorAccountDialog(scope.row.id)">修改</a>
                  <a href="javascript:void(0);" @click="disableBackAccount(1,scope.row.id)" v-if="scope.row.state==0">启用</a>
                  <a href="javascript:void(0);" @click="openDisableDialog(0,scope.row.id)" v-if="scope.row.state==1">禁用</a>
                  <a href="javascript:void(0);" @click="openRechargeDialog(scope.row.orgId)">充值</a>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize2">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="后台账号" name="third">
        <el-form :inline="true" class="demo-form-inline clear" size="small">
          <el-form-item label="账号名称">
            <el-input v-model="backFormInline.name" ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select clearable v-model="backFormInline.state" filterable placeholder="选择状态">
              <!--<el-option label="所有状态" value="null"></el-option>-->
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" @click="searchBackList">搜索</el-button>
          <el-button type="primary" size="small" @click="openAddAccountDialog()">添加后台账号</el-button>
        </el-form>

        <el-table
          :data="backTableData"
          border
          size="small"
          style="width: 100%"
          v-loading.body="loading3" element-loading-text="Loading">
          <el-table-column
            prop="id"
            label="账号ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="账号名称"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="联系人"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="添加时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="createUserName"
            label="添加人"
            min-width="100"
            align="center">
          </el-table-column>
          <el-table-column
            label="状态"
            min-width="80"
            align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.state==1">正常</p>
              <p v-if="scope.row.state==0">禁用</p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="80">
            <template slot-scope="scope">
              <div class="dropdown">
                <a href="javascript:void(0);" class="dropdown-btn"></a>
                <div class="dropdown-content" >
                  <a href="javascript:void(0);" @click="openAddAccountDialog(scope.row.id)">修改</a>
                  <a href="javascript:void(0);" @click="disableBackAccount(1,scope.row.id)" v-if="scope.row.state==0">启用</a>
                  <a href="javascript:void(0);" @click="openDisableDialog(0,scope.row.id)" v-if="scope.row.state==1">禁用</a>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange3"
          :current-page="currentPage3"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize3">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <!--代理商账号充值-->
    <el-dialog
      title='代理商充值'
      :visible.sync="agentRechargeDialog"
      class="rechargeDialog"
      @close="closeDialog('rechargeForm')"
      width="510px">
      <el-form ref="rechargeForm" :model="rechargeForm" label-width="80px"  status-icon size="small" :rules="rechargeFormRules">
        <el-form-item label="代理商名称" class="input-widA" prop="name">
          <el-input v-model="rechargeForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="充值金额" class="input-widA" prop="num">
          <el-input v-model="rechargeForm.num"></el-input> 元
        </el-form-item>
        <span class="span-footer">
          <el-button type="primary" size="small" @click="submitRecharge('rechargeForm')"  :disabled="rechargeLoading">确认</el-button>
          <el-button  size="small" @click="agentRechargeDialog=false">取消</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!--后台账号添加&修改弹框-->
    <el-dialog
      :title='addDialogTitle'
      :visible.sync="addAccountDialog"
      @close="closeDialog('addForm')"
      class="addAgentAccountDialog"
      width="650px">
      <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addFormRules"  size="small">
        <el-form-item label="账号名称" class="input-widA" prop="userName">
          <el-input v-model="addForm.userName" placeholder="请输入4~30位的账号名称，不得包含中文或空格" :disabled="isBackModify"></el-input>
        </el-form-item>
        <el-form-item label="景区名称" class="input-widA" prop="scenicName" v-if="activeName == 'first'">
          <el-select v-model="addForm.scenicName" placeholder="请选择" :disabled="isBackModify">
            <el-option
              v-for="item in scenicList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理商名称" class="input-widA" prop="distributorName" v-if="activeName == 'second'">
          <el-input v-model="addForm.distributorName" placeholder="请输入代理商名称，长度在2到30个字符"></el-input>
        </el-form-item>
        <!-- 添加页面的密码框 -->
        <el-form-item label="密码" class="input-widA" prop="password" v-if="!isBackModify">
          <el-input type="password" v-model="addForm.password"  placeholder="请输入6~20位的密码，不得包含中文或空格"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" class="input-widA" prop="repassword" v-if="!isBackModify">
          <el-input type="password" v-model="addForm.repassword" placeholder="请输入6~20位的密码，不得包含中文或空格"></el-input>
        </el-form-item>
        <!-- 修改页面的密码框 -->
        <el-form-item label="重置密码" class="input-widA" prop="passwordModify" v-if="isBackModify">
          <el-input type="password" v-model="addForm.passwordModify"  placeholder="请输入6~20位的密码，不得包含中文或空格"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" class="input-widA" prop="repasswordModify" v-if="isBackModify">
          <el-input type="password" v-model="addForm.repasswordModify" placeholder="请输入6~20位的密码，不得包含中文或空格"></el-input>
        </el-form-item>
        <el-form-item label="联系人" class="input-widA" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入联系人，长度在2到30个字符"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" class="input-widA" prop="phone">
          <el-input v-model="addForm.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="添加权限">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll(checkAll)">全选</el-checkbox>
          <div></div>
          <!--<div class="roleClassify">-->
            <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
            <!--<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">-->
              <!--<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>-->
            <!--</el-checkbox-group>-->
          <!--</div>-->
          <div class="roleClassify" v-for="(item,index) in rolesArray" :key="index">
            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item.checkAll,index)">{{item.title}}</el-checkbox>
            <el-checkbox-group v-model="item.checkedRoles" @change="handleCheckedCitiesChange(item.checkedRoles,index)">
              <el-checkbox v-for="(role,index2) in item.rolesList" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <span class="span-footer">
          <el-button type="primary" size="small" @click="submitAdd3('addForm')">确认</el-button>
          <el-button  size="small" @click="addAccountDialog=false">取消</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!--后台账号禁用弹框-->
    <el-dialog
      title="禁用"
      :visible.sync="disableDialog"
      width="30%"
      center>
      <span v-if="activeName == 'first'">禁用后，该景区账号及其子账号将无法登陆系统，确定要禁用？</span>
      <span v-else-if="activeName == 'second'">禁用后，该代理商将无法下单，该账号将无法登陆系统，确定要禁用？</span>
      <span v-else>禁用后，该账号无法登陆系统，确定要禁用？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="disableBackAccount(0, '禁用')">确 定</el-button>
        <el-button @click="disableDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getBackAccountList, getRolesList, addPlatformUser, getPlatformModifyData, submitPlatformModifyData, updatePlatformUserState, checkUserName, getScenicAccountList, queryScenicOrgList, addScenicUser, getDistributorAccountList, checkDistributorName, addDistributorUser, updateDistributorInfo, rechargeQueryInfo, distributorRecharge } from '@/api/userList'
  import { Message } from 'element-ui'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入6~20位的密码，不得包含中文或空格'))
        } else {
          if (this.addForm.passwordCheck !== '') {
            this.$refs.addForm.validateField('repassword')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.addForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var passwordModify = (rule, value, callback) => {
        if (this.addForm.repasswordModify !== '') {
          this.$refs.addForm.validateField('repasswordModify')
        }
        callback()
      }
      var repasswordModify = (rule, value, callback) => {
        if (value !== this.addForm.passwordModify) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var checkName = (rule, value, callback) => {
        if (this.isBackModify) {
          if (value !== '' && value !== this.currentName) {
            let param = {
              id: this.currentId
            }
            checkUserName(value, param).then(res => {
              let data = res.data
              if (data.errorCode === 'E_000') {
                if (data.body.flag == 1) {
                  callback()
                } else {
                  callback(new Error('账户名称已存在，请重新输入'))
                }
              }
            })
          } else if (value === this.currentName) {
            callback()
          }
        } else {
          if (value !== '') {
            let param = {
              id: null
            }
            checkUserName(value, param).then(res => {
              let data = res.data
              if (data.errorCode === 'E_000') {
                if (data.body.flag == 1) {
                  callback()
                } else {
                  callback(new Error('账户名称已存在，请重新输入'))
                }
              }
            })
          }
        }
//        if (value !== '' && value !== this.currentName) {
//          let param
//          if (this.isBackModify) {
//            param = {
//              id: this.currentId
//            }
//          } else {
//            param = {
//              id: null
//            }
//          }
//          checkUserName(value, param).then(res => {
//            let data = res.data
//            if (data.errorCode === 'E_000') {
//              if (data.body.flag == 1) {
//                single = true
//                callback()
//              } else {
//                callback(new Error('账户名称已存在，请重新输入'))
//              }
//            }
//          })
//        } else if (value === this.currentName) {
//          callback()
//        }
      }

      var checkDstName = (rule, value, callback) => {
        if (this.isBackModify) {
          if (value !== '' && value !== this.currentDstName) {
            let param = {
              id: this.currentId
            }
            checkDistributorName(value, param).then(res => {
              let data = res.data
              if (data.errorCode === 'E_000') {
                if (data.body.flag == 1) {
                  callback()
                } else {
                  callback(new Error('代理商名称已存在，请重新输入'))
                }
              }
            })
          } else if (value === this.currentDstName) {
            callback()
          }
        } else {
          if (value !== '') {
            let param = {
              id: null
            }
            checkDistributorName(value, param).then(res => {
              let data = res.data
              if (data.errorCode === 'E_000') {
                if (data.body.flag == 1) {
                  callback()
                } else {
                  callback(new Error('代理商名称已存在，请重新输入'))
                }
              }
            })
          }
        }
//        if (value !== '' && value !== this.currentDstName) {
//          let param
//          if (this.isBackModify) {
//            param = {
//              id: this.currentId
//            }
//          } else {
//            param = {
//              id: null
//            }
//          }
//          checkDistributorName(value, param).then(res => {
//            let data = res.data
//            if (data.errorCode === 'E_000') {
//              if (data.body.flag == 1) {
//                callback()
//              } else {
//                callback(new Error('代理商名称已存在，请重新输入'))
//              }
//            }
//          })
//        } else if (value === this.currentDstName) {
//          callback()
//        }
      }
      return {
        isUpdateTable: true,
        rechargeLoading: false,
        loading: false,
        loading1: false,
        loading2: false,
        loading3: false,
        currentName: null,
        currentId: null,
        // 景区账号
        scenicFormInline: {
          name: '',
          state: null
        },
        scenicTableData: [],
        totalSize1: null,
        currentPage1: 1,
        addScenicForm: {
          userName: '',
          scenicName: '',
          password: null,
          repassword: null,
          passwordModify: null,
          repasswordModify: null,
          name: null,
          phone: null,
          AuthorityList: []
        },
        scenicList: [],
        // 代理商账号数据
        currentDstName: null,
        distributorFormInline: {
          distributorName: null,
          state: null
        },
        totalSize2: null,
        currentPage2: 1,
        distributorTableData: [],
        agentDisabled: false,
        agentRechargeDialog: false,
        rechargeForm: {
          name: '',
          num: null,
          orgId: null
        },
        // 后台账号数据
        backFormInline: {
          name: null,
          state: null
        },
        totalSize3: null,
        currentPage3: 1,
        backDisabled: false,
        isBackModify: false,
        backAccountDisabledId: null,
        backTableData: [],
        activeName: 'first',
        checkAll: false,
        checkedCities: ['上海', '北京'],
        isIndeterminate: false,
        addAccountDialog: false,
        disableDialog: false,
        AuthorityList: [],
        addDialogTitle: null,
        // 后台账号添加表单
        addForm: {
          scenicName: null,
          userName: '',
          password: null,
          repassword: null,
          passwordModify: null,
          repasswordModify: null,
          name: null,
          phone: null,
          AuthorityList: [],
          distributorName: ''
        },
        backAccountCurrentId: null,
        backAccountCurrentStatus: null,
        // 后台账号所有权限数组
        rolesArray: [],
        // 后台账号添加表单校验
        addFormRules: {
          name: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
            { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入6~20位的密码，不得包含中文或空格', trigger: 'blur' },
            { min: 6, max: 20, message: '请输入6~20位的密码，不得包含中文或空格', trigger: 'blur' },
            { pattern: /^[^\s\u4e00-\u9fa5]{6,20}$/, message: '请输入6~20位的密码，不得包含中文或空格', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
          repassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ],
          passwordModify: [
            { min: 6, max: 20, message: '请输入6~20位的密码，不得包含中文或空格', trigger: 'blur' },
            { pattern: /^[^\s\u4e00-\u9fa5]{6,20}$/, message: '请输入6~20位的密码，不得包含中文或空格', trigger: 'blur' },
            { validator: passwordModify, trigger: 'blur' }
          ],
          repasswordModify: [
            { validator: repasswordModify, trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入账户名称', trigger: 'blur' },
            {
              pattern: /^[a-zA-Z0-9]{4,30}$/,
              message: '请输入4~30位的账号名称，不得包含中文或空格',
              trigger: 'blur'
            },
            { validator: checkName, trigger: 'blur' }
          ],
          distributorName: [
            { required: true, message: '请输入代理商名称', trigger: 'blur' },
            { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
            { validator: checkDstName, trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { pattern: /(^\d{11}$)|(^\d{3,4}-\d{7,8}$)|(^\+\d{2}\s?\d{11}$)|(^\d{10}$)/, message: '请输入正确的电话号码', trigger: 'blur' }
          ],
          scenicName: [
            { required: true, message: '请选择景区名称', trigger: 'blur' }
          ]
        },
        rechargeFormRules: {
          num: [
            { required: true, message: '请输入充值金额' },
            { pattern: /^[0-9]{1,8}([.][0-9]{1,2})?$/, message: '请输入数字，小数点后最多两位', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
//      // 获取代理商账号列表
//      this.getDistributorTableList()
//      // 获取后台账号列表
//      this.getBackTableList()
      // 获取景区账号列表
      this.getScenicTableList()
      this.updateTable()
    },
    methods: {
      // 代理商充值接口
      submitRecharge(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let orgId = this.rechargeForm.orgId
            let params = {
              balance: this.rechargeForm.num
            }
            this.rechargeLoading = true
            distributorRecharge(orgId, params).then(res => {
              this.agentRechargeDialog = false
              let data = res.data
              this.rechargeLoading = false
              if (data.errorCode === 'E_000') {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 2 * 1000
                })
                this.getDistributorTableList()
              }
            }).catch(() => {
              this.rechargeLoading = false
            })
          }
        })
      },
      updateTable() {
        this.isUpdateTable = false
        this.$nextTick(() => {
          this.isUpdateTable = true
        })
      },
      // 代理商充值弹框打开接口
      openRechargeDialog(orgId) {
        rechargeQueryInfo(orgId).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.rechargeForm.name = data.body.name
          }
        })
        this.rechargeForm.orgId = orgId
        this.agentRechargeDialog = true
      },
      // 初始化景区组织信息下拉菜单数据
      getScenicInfoList() {
        this.scenicList = []
        queryScenicOrgList().then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
             if (data.body.length > 0) {
               data.body.forEach(ele => {
                 let obj = {
                   id: ele.id,
                   label: ele.name
                 }
                 this.scenicList.push(obj)
               })
             }
          }
        })
      },
      // 账号修改弹框数据获取
      getBackAccountModifyData(id) {
        getPlatformModifyData(id).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.currentId = id
            this.currentName = data.body.userName
            this.currentDstName = data.body.distributorName
            this.addForm.distributorName = data.body.distributorName
            this.addForm.name = data.body.name
            this.addForm.userName = data.body.userName
            this.addForm.scenicName = data.body.scenicName
            this.addForm.phone = data.body.phone
            this.getModifyRolesData(data.body.resourceInfoList)
            this.addAccountDialog = true
          }
        })
      },
      // 添加或修改页面角色权限数据填充
      getModifyRolesData(rawData) {
        if (rawData.length > 0) {
          this.rolesArray = []
          rawData.forEach(item => {
            let rolesList = []
            let rolesData = []
            let checkedRoles = []
            item.children.forEach(ele => {
              let obj = {
                id: ele.id,
                name: ele.name
              }
              rolesList.push(obj)
              rolesData.push(ele.id)
              if (ele.flag == 1) {
                checkedRoles.push(ele.id)
              }
            })
            let obiect = {
              isIndeterminate: false,
              checkAll: false,
              rolesData: rolesData,
              rolesList: rolesList,
              checkedRoles: checkedRoles,
              title: item.name,
              id: item.id
            }
            this.checkboxChange(checkedRoles, obiect)
            this.rolesArray.push(obiect)
          })
          // 权限全选框状态改变
          this.allCheckChange()
          this.AuthorityList = []
          this.rolesArray.forEach(item => {
            this.AuthorityList = this.AuthorityList.concat(item.rolesData)
          })
          console.log(this.AuthorityList, 'this.AuthorityList')
        }
      },
      // 获得初始角色权限数据
      getRolesArray() {
        let orgType = null
        if (this.activeName == 'first') {
          orgType = 1
        } else if (this.activeName == 'third') {
          orgType = 0
        } else {
          orgType = 2
        }
        let params = {
          orgType: orgType
        }
        getRolesList(params).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.getModifyRolesData(data.body)
            this.addAccountDialog = true
          }
        })
      },
      // 权限一级全选框状态改变
      checkboxChange(value, item) {
        let checkedCount = value.length
        item.checkAll = checkedCount === item.rolesData.length
        item.isIndeterminate = checkedCount > 0 && checkedCount < item.rolesData.length
      },
      // 景区账号列表搜索
      searchScenicList() {
        this.currentPage1 = 1
        this.getScenicTableList()
      },
      // 景区账号列表翻页
      handleCurrentChange1(val) {
        this.currentPage1 = val
        this.getScenicTableList()
      },
      // 代理商账号列表搜索
      searchDstList() {
        this.currentPage2 = 1
        this.getDistributorTableList()
      },
      // 代理商账号列表翻页
      handleCurrentChange2(val) {
        this.currentPage2 = val
        this.getDistributorTableList()
      },
      // 后台账号列表搜索
      searchBackList() {
        this.currentPage3 = 1
        this.getBackTableList()
      },
      // 后台账号列表翻页
      handleCurrentChange3(val) {
        this.currentPage3 = val
        this.getBackTableList()
      },
      // 获取后台账号列表数据
      getBackTableList() {
        let params = {
          userName: this.backFormInline.name || null,
          pageSize: 20,
          pageNumber: this.currentPage3,
          state: this.backFormInline.state || null
        }
        this.loading3 = true
        getBackAccountList(params).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.loading3 = false
            this.backTableData = data.body.list
            this.totalSize3 = data.body.total
          }
        }).catch(() => {
          this.loading3 = false
        })
      },
      // 获取景区账号列表数据
      getScenicTableList() {
        let params = {
          scenicName: this.scenicFormInline.name || null,
          pageSize: 20,
          pageNumber: this.currentPage1,
          state: this.scenicFormInline.state || null
        }
        this.loading1 = true
        getScenicAccountList(params).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.loading1 = false
            this.scenicTableData = data.body.list
            this.totalSize1 = data.body.total
          }
        }).catch(() => {
          this.loading1 = false
        })
      },
      // 获取代理商账号列表数据
      getDistributorTableList() {
        let params = {
          distributorName: this.distributorFormInline.distributorName || null,
          pageSize: 20,
          pageNumber: this.currentPage2,
          state: this.distributorFormInline.state || null
        }
        this.loading2 = true
        getDistributorAccountList(params).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.loading2 = false
            this.distributorTableData = data.body.list
            this.totalSize2 = data.body.total
          }
        }).catch(() => {
          this.loading2 = false
        })
      },
      // 打开账号添加、修改账号页面弹框
      openAddAccountDialog(id) {
        this.initForm()
        this.backAccountCurrentId = null
        if (id) {
          this.addDialogTitle = '修改后台账号'
          this.backAccountCurrentId = id
          this.isBackModify = true
          this.getBackAccountModifyData(id)
        } else {
          this.addDialogTitle = '添加后台账号'
          this.isBackModify = false
          this.getRolesArray()
        }
      },
      // 打开账号添加、修改账号页面弹框
      openDistributorAccountDialog(id) {
        this.backAccountCurrentId = null
        this.initForm()
        if (id) {
          this.addDialogTitle = '修改代理商账号'
          this.backAccountCurrentId = id
          this.isBackModify = true
          this.getBackAccountModifyData(id)
        } else {
          this.addDialogTitle = '添加代理商账号'
          this.isBackModify = false
          this.getRolesArray()
        }
      },
      // 打开账号添加、修改账号页面弹框
      openScenicAccountDialog(id) {
        this.initForm()
        this.getScenicInfoList()
        this.backAccountCurrentId = null
        if (id) {
          this.addDialogTitle = '修改景区账号'
          this.backAccountCurrentId = id
          this.isBackModify = true
          this.getBackAccountModifyData(id)
        } else {
          this.addDialogTitle = '添加景区账号'
          this.isBackModify = false
          this.getRolesArray()
        }
//        this.addScenicAccountDialog = true
      },
      // 禁用提示弹框
      openDisableDialog(status, id) {
        this.disableDialog = true
        this.backAccountDisabledId = id
        this.backAccountCurrentStatus = status
      },
      // 账号列表禁用&启用
      disableBackAccount(status, id) {
        if (id == '禁用') {
          id = this.backAccountDisabledId
        }
        let data = {
          operationFlag: status
        }
        updatePlatformUserState(id, data).then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            Message({
              message: res.data.message,
              type: 'success',
              duration: 2 * 1000
            })
            if (this.activeName == 'third') {
              this.getBackTableList()
            } else if (this.activeName == 'first') {
              this.getScenicTableList()
            } else {
              this.getDistributorTableList()
            }
          }
        })
        this.disableDialog = false
      },
      closeDialog(formName) {
        this.$refs[formName].resetFields()
      },
      // 选项卡点击切换事件
      handleClick(tab, event) {
        if (tab.index == 1) {
          // 获取代理商账号列表
          this.getDistributorTableList()
        } else if (tab.index == 2) {
          // 获取后台账号列表
          this.getBackTableList()
        } else {
          // 获取景区账号列表
          this.getScenicTableList()
        }
      },
      // 账号添加弹框确认提交
      submitAdd3(formName) {
        // 获取添加后台账号页面勾选的{权限list}
        this.addForm.AuthorityList = []
        if (this.checkAll) {
          this.addForm.AuthorityList = this.AuthorityList
          this.rolesArray.forEach(item => {
            this.addForm.AuthorityList.push(item.id)
          })
        } else {
          this.rolesArray.forEach(item => {
            this.addForm.AuthorityList = this.addForm.AuthorityList.concat(item.checkedRoles)
            if (item.checkedRoles.length > 0) {
              this.addForm.AuthorityList.push(item.id)
            }
          })
        }
        // 数组去重
        this.addForm.AuthorityList = [...new Set(this.addForm.AuthorityList)]
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.isBackModify) {
              if (this.activeName == 'first') {
                // 请求添加景区账号接口
                let params1 = {
                  name: this.addForm.name,
                  passwd: this.addForm.password,
                  phone: this.addForm.phone,
                  userName: this.addForm.userName,
                  resourceList: this.addForm.AuthorityList,
                  orgId: this.addForm.scenicName
                }
                addScenicUser(params1).then(res => {
                  let data = res.data
                  if (data.errorCode === 'E_000') {
                    Message({
                      message: res.data.message,
                      type: 'success',
                      duration: 2 * 1000
                    })
                    this.getScenicTableList()
                    this.addAccountDialog = false
                    this.closeDialog('addForm')
                  }
                }).catch({
                })
              } else if (this.activeName == 'third') {
                let params2 = {
                  name: this.addForm.name,
                  passwd: this.addForm.password,
                  phone: this.addForm.phone,
                  userName: this.addForm.userName,
                  resourceList: this.addForm.AuthorityList
                }
                // 请求添加后台账号接口
                addPlatformUser(params2).then(res => {
                  let data = res.data
                  if (data.errorCode === 'E_000') {
                    Message({
                      message: res.data.message,
                      type: 'success',
                      duration: 2 * 1000
                    })
                    this.getBackTableList()
                    this.addAccountDialog = false
                    this.closeDialog('addForm')
                  }
                }).catch({
                })
              } else {
                let params3 = {
                  distributorName: this.addForm.distributorName,
                  name: this.addForm.name,
                  passwd: this.addForm.password,
                  phone: this.addForm.phone,
                  userName: this.addForm.userName,
                  resourceList: this.addForm.AuthorityList
                }
                // 请求添加代理商账号接口
                addDistributorUser(params3).then(res => {
                  let data = res.data
                  if (data.errorCode === 'E_000') {
                    Message({
                      message: res.data.message,
                      type: 'success',
                      duration: 2 * 1000
                    })
                    this.getDistributorTableList()
                    this.addAccountDialog = false
                    this.closeDialog('addForm')
                  }
                }).catch({
                })
              }
            } else {
              if (this.activeName !== 'second') {
                let paramsData = {
                  name: this.addForm.name,
                  passwd: this.addForm.passwordModify,
                  phone: this.addForm.phone,
                  userName: this.addForm.userName,
                  resourceList: this.addForm.AuthorityList
                }
                submitPlatformModifyData(this.backAccountCurrentId, paramsData).then(res => {
                  let data = res.data
                  if (data.errorCode === 'E_000') {
                    Message({
                      message: res.data.message,
                      type: 'success',
                      duration: 2 * 1000
                    })
                    if (this.activeName == 'first') {
                      this.getScenicTableList()
                    } else if (this.activeName == 'third') {
                      this.getBackTableList()
                    }
                    this.addAccountDialog = false
                    this.closeDialog('addForm')
                  }
                }).catch({
                })
              } else {
                let paramsData2 = {
                  distributorName: this.addForm.distributorName,
                  name: this.addForm.name,
                  passwd: this.addForm.passwordModify,
                  phone: this.addForm.phone,
                  userName: this.addForm.userName,
                  resourceList: this.addForm.AuthorityList
                }
                updateDistributorInfo(this.backAccountCurrentId, paramsData2).then(res => {
                  let data = res.data
                  if (data.errorCode === 'E_000') {
                    Message({
                      message: res.data.message,
                      type: 'success',
                      duration: 2 * 1000
                    })
                    this.getDistributorTableList()
                    this.addAccountDialog = false
                    this.closeDialog('addForm')
                  }
                }).catch({
                })
              }
            }
          } else {
            return false
          }
        })
      },
      // 全选点击事件
      handleCheckAll(val) {
//        this.AuthorityList = []
        this.rolesArray.forEach(item => {
          item.checkAll = val
          item.checkedRoles = val ? item.rolesData : []
//          this.AuthorityList = val ? this.AuthorityList.concat(item.checkedRoles) : []
          item.isIndeterminate = false
        })
        this.isIndeterminate = false
      },
      // 模块全选点击事件
      handleCheckAllChange(val, index) {
        this.rolesArray[index].checkedRoles = val ? this.rolesArray[index].rolesData : []
        this.rolesArray[index].isIndeterminate = false
        this.allCheckChange()
      },
      // 多选框点击事件
      handleCheckedCitiesChange(value, index) {
        let checkedCount = value.length
        this.rolesArray[index].checkAll = checkedCount === this.rolesArray[index].rolesData.length
        this.rolesArray[index].isIndeterminate = checkedCount > 0 && checkedCount < this.rolesArray[index].rolesData.length
        this.allCheckChange()
      },
      // 多选框&模块全选触发的全选样式&数据改变
      allCheckChange() {
        let checkAll = this.rolesArray.length
        this.rolesArray.forEach(item => {
          if (item.checkedRoles.length != item.rolesData.length) {
            checkAll--
          }
        })
        this.checkAll = (checkAll === this.rolesArray.length)
        this.isIndeterminate = checkAll > 0 && checkAll < this.rolesArray.length
//        this.AuthorityList = []
//        this.rolesArray.forEach(item => {
//          this.AuthorityList = this.checkAll ? this.AuthorityList.concat(item.rolesData) : []
//        })
      },
      initForm() {
        this.addForm = {
          scenicName: null,
          userName: '',
          password: null,
          repassword: null,
          passwordModify: null,
          repasswordModify: null,
          name: null,
          phone: null,
          AuthorityList: [],
          distributorName: ''
        }
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss">
  .account{
    .el-item-wideB{

    }
    .rechargeDialog{
      .el-form-item__content{
        margin-left:95px !important;
      }
      .el-form-item__label{
        width: 95px !important;
      }
      .el-input{
        .el-input__inner{
          width:320px !important;
        }
      }

    }
    .addAgentAccountDialog{
      .el-form-item__content{
        margin-left:95px !important;
      }
      .el-form-item__label{
        width: 95px !important;
      }
    }
    .el-dialog__headerbtn{
      top:12px;
    }
    .el-tabs__content{
      overflow: visible;
    }
    .el-tab-pane{
      overflow: visible;
    }
    .el-table {
      overflow: visible !important;
    }

    .el-table .el-table__body-wrapper {
      overflow: visible;
    }

    .el-table .cell {
      padding: 0 4px;
      overflow: visible;
    }

    .input-widA{
      .el-form-item__content{
        width:350px;
        .el-input .el-input__inner{
          width:350px;
        }
        .el-form-item__error{
          padding-top: 0;
        }
      }

    }
    .roleClassify{
      width:30%;
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;
      /*float:left;*/
      .el-checkbox-group{
        .el-checkbox__inner{
          border-radius: 10px !important;
        }
        .el-checkbox{
          display: block;
          margin-left: 20px;
          .el-checkbox__input{
            line-height: 2;
            border-radius: 10px !important;
            .el-checkbox__inner{
              border-radius: 10px !important;
            }
          }

        }
      }
    }
    .span-footer{
      width:100%;
      display: block;
      text-align: center;
    }
  }
</style>
